import React, { PureComponent } from 'react';

// 引入影视样式
import './scss/filmPlay.scss';
import videojs from 'video.js';
// 引入视频框架的专属样式
import "video.js/dist/video-js.css";
import { Button, message } from 'antd';
import Axios from 'axios';
import { webSite } from '../../website';
export default class FilmPlay extends PureComponent {
  constructor(props) {
    super(props);
    this.player = null;
    this.state = {
      // 猜你喜欢列表
      FilmAll: [],
      // 电影的url
      url: '',
      // 切换播放源
      info: []
    }
  }

  componentWillUnmount () {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
    // 卸载异步操作设置状态
    this.setState = (state, callback) => {
      return;
    }
  }

  componentDidMount () {
    // 加载猜你喜欢
    this.getFilm();
    // 加载视频
    this.getPlay(this.props.location.state);
  }

  getPlay = (state) => {
    const _this = this;  // 存储this
    // 同步title
    document.title = `正在播放：电影《${state.title}》`;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getPlayUrl", { playUrl: state.url }).then(err => {
      if (err.data.code === 'P0001') {
        _this.setState({
          // 视频地址
          url: err.data.url,
          // 切换
          info: err.data.info
        }, () => {
          _this.player = videojs("video");
          _this.player.controls(true)
          _this.player.src(_this.state.url)
          _this.player.play().catch(() => {
            message.info({ content: '电影需要缓冲，请勿操作过快', className: 'bulletChatMessage' })
          })
        })
      } else {
        message.error({ content: '资源已失效或找不到可用资源', className: 'bulletChatMessage' });
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 电影请求
  getFilm = () => {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getStart", { type: 'movie' }).then(err => {
      if (err.data.code === 'G0001') {
        let all = err.data.All;
        let FilmAll = [];
        for (let index = 0; index < 6; index++) {
          if (all.length > 0) {
            let n = Math.floor(Math.random() * all.length) //随机抽取的索引值
            FilmAll.push(all.splice(n, 1)[0]) //在把删除的值放入被删数组
          }
        }
        this.setState({
          FilmAll
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 切换播放源
  isBtnUrl = (url) => {
    this.player = videojs("video");
    this.player.controls(true)
    this.player.src(url)
    this.player.play().catch(() => {
      message.info({ content: '电影需要缓冲，请勿操作过快', className: 'bulletChatMessage' })
    })
  }

  // 跳转到电影播放页面
  GoFilmPlay = (list) => {
    this.props.history.push({ pathname: "/Movies/FilmPlay", state: { url: list.CarouselUrl, title: list.CarouselText } });
    // 刷新网页
    window.history.go(0);
  }

  // 跳转到搜索页面
  goSearch = () => {
    this.props.history.replace('/Movies/Search')
  }

  // 点击图标跳转到本地
  goMoviesHome = () => {
    this.props.history.replace('/Movies')
  }

  render () {
    let { FilmAll, info } = this.state;
    let { title } = this.props.location.state;
    return (
      <div className='filmPlay'>
        <div className='MoviesHeader'>
          {/* 顶部logo */}
          <div className='MoviesHeader_logo'>
            <img src={require('../image/tv.png')} alt="logo" onClick={this.goMoviesHome} />
          </div>
          <div className='MoviesHeader_search'>
            <Button className='MoviesHeaderViesInput' type='text' onClick={this.goSearch}>输入你想看的</Button>
          </div>
          <div className='MoviesHeader_bottom'>
            <Button type='text' className='MoviesHeader_bottom_body' onClick={this.goSearch}>全网搜索</Button>
          </div>
        </div>
        {/* 内容 */}
        <video id="video" className="video-js vjs-default-skin video" ></video>
        {/* 切换源 */}
        <h3 className='title'>{title}</h3>
        <p className='title_is'>切换播放源</p>
        <div className='moviesPlay_yuan'>
          {
            info.length !== 0 ?
              info.map((list, index) => {
                return (
                  <Button key={index} onClick={() => this.isBtnUrl(list.url)} type='text'>{list.name}</Button>
                )
              }) : ''
          }
        </div>
        {/* 猜你喜欢 */}
        <div className='filmPlay_love'>
          <div className='filmPlay_love_title'>猜你喜欢</div>
          <ul className='filmPlayUl'>
            {
              FilmAll.length !== 0 ?
                FilmAll.map((list, index) => {
                  return (
                    <li key={index} onClick={() => this.GoFilmPlay(list)}>
                      <img src={list.CarouselImg} alt={list.CarouselText} />
                      <p>{list.CarouselText}</p>
                    </li>
                  )
                })
                : ''
            }
          </ul>
        </div>
        <span className='moviesPlay_sapn'>电影内容来源自互联网、如有冒犯，立即删除</span>
      </div>
    )
  }
}